//定义主题色
@theme-color: #5d8b49;
//定义点缀色
@adorn-color: #ffa11e;
//边框色
@border-color: #cacaca;
//
@bg-color: #eaf6eb;
//动作
.trandtion-ease(@time: .2s){
    transition: all ease-in-out @time;
    -webkit-transition: all ease-in-out @time;
    -ms-transition: all ease-in-out @time;
}


//头部
@header-height: 64px;
@leftnav-width: 200px;
.admin-allbox{
    min-width: 1240px;
    .icon-maright5{
        margin-right: 5px;
    }
    .icon-maright8{
        margin-right: 8px;
    }
    .layui-header{
        height: @header-height;
    }
    .header{
        background-color: @theme-color;
        color: #fff;
    }
    .admin-header-logo{
        min-width: 200px;
        max-width: 340px;
        margin: (@header-height - 48)/2 42px 0 12px;
        float:left;
        a{
            color: #fff;
            
            &:hover{
                opacity: 0.9;
            }
            dt{
                font-size: 18px;
                line-height: 28px;
            }
            dd{
                font-size: 12px;
                line-height: 20px;
            }
        }
    }
    @topnav-width: 100px;
    .header-top-nav{
        height: 100%;
        float:left;
        position: relative;
        .nav-box{
            border-left: 1px solid rgba(0,0,0,.1);
            height: 100%;
            overflow: hidden;
        }
        .nav-inbox{
            max-width: @topnav-width * 6;
            overflow: hidden;         
            .trandtion-ease();
        }
        .nav-box-link{
            box-sizing: border-box;
            float: left;
            height: @header-height;
            width: @topnav-width;
            color: #fff;
            text-align: center;
            border-right: 1px solid rgba(0,0,0,.1);
            cursor: pointer;
            dt{
                margin-top: (@header-height - 44px)/2;
                i{
                    font-size: 20px;
                    line-height: 24px;
                }
            }
            dd{
                font-size: 14px;
                line-height: 20px;
            }
            &:hover,&.active{
                background-color: rgba(0,0,0,.16);
                border-bottom: 5px solid @adorn-color;
            }
        }
        .nav-updown{
            position: absolute;
            top: (@header-height - 52px)/2;
            right: -36px;
            margin-left: 12px;
            text-align: center;
            display: none;
            >span{
                display: block;
                width: 24px;
                height: 24px;
                line-height: 24px;
                background-color: #fff;
                color: @theme-color;
                cursor: no-drop;
                overflow: hidden;
            }
            .nav-updown-up{
                border-top-left-radius: 3px;  
                border-top-right-radius: 3px;
            }
            .nav-updown-down{
                border-bottom-left-radius: 3px;  
                border-bottom-right-radius: 3px;
                margin-top: 4px;
            }
            .active{
                background-color: rgba(0,0,0,.24);
                color: #fff;
                cursor: pointer;
                &:hover{
                    opacity: .8;
                }
            }
        }
    }
    .header-top-news{
        float: right;
        .layui-nav{
            background-color: transparent;
            color: #fff;
            padding: 0;
            .layui-nav-item{
                line-height: @header-height;
                .layui-nav-more{
                    display: none;
                }
                .admin-head-news{
                    font-size: 20px;
                    color: #fff;
                    .admin-news-tips{
                        width: 20px;
                        height: 20px;
                        line-height: 20px;
                        border-radius: 50%;
                        text-align: center;
                        font-size: 12px;
                        background-color: #f86c6b;
                        position: absolute;
                        top: 12px;
                        right: 10px;
                    }
                }
                .layui-nav-child{
                    top: @header-height  + 5px;
                    right: 0;
                    left: auto;
                    width: 360px;
                    padding: 0;
                }
                .admin-news-list{
                    border-bottom: solid 1px #e8e8e8;
                    >a{
                        padding: 15px 20px;
                    }
                    &:last-child{
                        border-bottom: none;
                    }
                }
                .admin-news-title{
                    overflow: hidden;
                    line-height: 1;
                    h5{
                        font-size: 14px;
                        color: #333;
                        float: left;
                    }
                    time{
                        font-size: 14px;
                        color: #f86c6b;
                        float: right;
                    }
                }
                .admin-news-text{
                    margin-top: 10px;
                    font-size: 12px;
                    color: #666;
                    line-height: 1;
                }
                .admin-news-all{
                    color: @theme-color;
                    line-height: 1;
                    text-align: center;
                    i{
                        margin-left: 5px;
                    }
                }
            }
            .admin-news-null{
                text-align: center;
                padding: 20px 0;
                color: #666;
                border-bottom: solid 1px #e8e8e8;
                span{
                    margin-left: 8px;
                }
            }
            .admin-head-user{
                .admin-head-userimg{
                    width: 40px;
                    height: 40px;
                }
                .admin-head-username{
                    color: #fff;
                }
            }
            .layui-nav-bar{
                background-color: rgba(255,255,255,.1)
            }
        }
    }
    .header-top-usercenter{
        float: right;
        .layui-nav{
            background-color: transparent;
            color: #fff;
            padding-left: 0;
            margin-left: 2px;
            .layui-nav-item{
                line-height: @header-height;
                .layui-nav-more{
                    top: (@header-height - 6px)/2;
                    border-color: #fff transparent transparent;
                }
                .layui-nav-mored{
                    top: (@header-height - 14px)/2;
                    border-color: transparent transparent #fff;
                }
                .layui-nav-child{
                    top: @header-height  + 5px;
                }
            }
            .admin-head-user{
                .admin-head-userimg{
                    width: 40px;
                    height: 40px;
                }
                .admin-head-username{
                    color: #fff;
                }
            }
            .layui-nav-bar{
                background-color: rgba(255,255,255,.1)
            }
        }
    }
    .layui-side {//leftnav
        top: @header-height;
        width: @leftnav-width - 1px;
        border-right: 1px solid @border-color;
        overflow-x: inherit;
        position: absolute;
        padding-top: 50px;
        &.layui-bg-white{
            background-color: @bg-color;
        }
        .scrollbox{
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }
        .toggle-icon{
            position: absolute;
            right: 0;
            top: 14px;
            width: 19px;
            height: 22px;
            background: url(../images/sider-toggle.png) no-repeat;
            background-position: 0 0;
            cursor: pointer;
            z-index: 2;
        }
        .layui-side-scroll{
            width: @leftnav-width + 20px;
        }
        .layui-nav-tree{
            width: @leftnav-width - 1px;
            background-color: transparent;
            .layui-nav-bar{
                background-color: @adorn-color;
                width: 3px;
            }
        }
        @leftnav-color: #2d4112;
        .layui-nav-item-title{
            width: 100%;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid @border-color;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            a *{
                font-size: 16px;
                color: @leftnav-color;
            }
            i{
                margin-left: 12px;
                color: @leftnav-color;
            }
        }
        .layui-nav-item{
            background-color: transparent;
            border-bottom: 1px solid @border-color;
            >a{
                position: relative;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                &:before{
                    content:"";
                    width: 0;
                    height: 0;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: @adorn-color;
                    .trandtion-ease();
                }
            }
            >a *{
                color: @leftnav-color;
            }
            >a:hover{
                background-color: @theme-color!important;
                *{
                    color: #fff;
                }
                .layui-nav-bar{
                    display: none;
                }
            }
            .layui-nav-child{
               a:hover{
                    background-color: #f3f7f3!important;
                }
                a *{
                    color: @leftnav-color;
                }
                .layui-this a{
                    background-color: #fff;
                }
            }
            &.layui-nav-itemed{
                >a{
                    background-color: @theme-color!important;
                    *{
                        color: #fff;
                    }
                    &:before{
                        width: 3px;
                        height: 100%;
                    }
                }
            }     
        }
    }
    .layui-body{
        top: @header-height;
        left: @leftnav-width;
        position: inherit;
        margin-left: @leftnav-width;
        .layui-tab{
            margin: 0;
            height: 100%;
        }
        .layui-tab-title{
            padding-left: 30px;
            padding-top: 10px;
            >li{
                margin-right: 5px;
                &:first-child{
                    .layui-tab-close{
                        display: none;
                    }
                }
                &:after{
                    position: absolute;
                    left: 0;
                    top: 0;
                    content: '';
                    width: 100%;
                    height: 41px;
                    border: 1px solid #e2e2e2;
                    border-radius: 2px 2px 0 0;
                    -webkit-box-sizing: border-box!important;
                    -moz-box-sizing: border-box!important;
                    box-sizing: border-box!important;
                    pointer-events: none;
                }
                &.layui-this{
                    color: @theme-color; 
                    &:after{
                        border-bottom: 1px solid #fff;
                        border-top: 2px solid @theme-color;
                    }
                }
            }
            .layui-tab-bar{
                top: 10px;
            }
        }
        .layui-tab-content{
            padding-top: 0;
            .layui-tab-item{
                height: 100%;
            }
        }
    }
    .layui-footer{
        left: @leftnav-width;
        background-color: @bg-color;
        height: 32px;
        .footer-copyright{//footer
            line-height: 32px;
            text-align: center;
            color: #666;
            font-size: 15px;
            border-top: @border-color 1px solid;
            a {
                padding: 0 5px;
            }
        }
    }
}
